<template>
	<div class="state-up">
		<div class="">
			<!-- <label>主题:</label>
			<el-input v-model="input" placeholder="请输入内容"></el-input> -->
			<label>内容:</label>
			<el-input
				type="textarea"
				:autosize="{ minRows: 2, maxRows: 4}"
				placeholder="请输入内容"
				v-model="textarea2">
			</el-input>
			<label>图片:</label>
			<el-upload
				class="upload-demo"
				action="https://jsonplaceholder.typicode.com/posts/"
				:on-preview="handlePreview"
				:on-remove="handleRemove"
				:before-remove="beforeRemove"
				:on-success="uploadSuccess"
				:file-list="fileList"
				list-type="picture">
				<el-button size="small" type="primary">点击上传</el-button>
				<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
			</el-upload>
			<el-row>
				<el-button type="primary" round @click='upload'>上传</el-button>
			</el-row>
		</div>
	</div>
</template>

<script>
// import bus from '../../eventBus.js'
export default{
	name:'up',
	data(){
		return{
			fileList: [],
			input:'',
			textarea2:'',
			imgurl:'',
			num:3,
			ulist:[],
			userimg:require('../../assets/yashe.webp')
		}
	},
	methods: {
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePreview(file) {
			console.log(file);
			console.log(file.name);
		},
		beforeRemove(file) {
			return this.$confirm(`确定移除 ${ file.name }？`);
		},
		uploadSuccess(res, file){
			console.log(res)
			console.log(file.url)
			this.imgurl = file.url
		},
		upload(){
			const uplist = JSON.parse(window.localStorage.getItem( "upload")) || [];
			const len = uplist.length;
			let date = new Date()
			const up = {
				id:len+4,
				title:this.textarea2,
				img:this.imgurl,
				userphone:this.$store.state.user.phone,
				username:this.$store.state.user.name,
				userimg:this.userimg,
				time:this.timeFormat(date),
				zan:12
			}
			// console.log(up)
			this.ulist.push(up)
			uplist.push(up);
			window.localStorage.setItem( "upload",JSON.stringify(uplist));
			// console.log(this.ulist.title)
			// bus.$emit('upEvent',this.ulist)
		},
		timeFormat(time) {
			let year = time.getFullYear();
			let month = time.getMonth() + 1 > 9 ? time.getMonth()+1 : '0'+(time.getMonth()+1);
			let day = time.getDate() > 10 ? time.getDate() : "0" + time.getDate();
			return year + "-" + month + "-" + day + " " + time.getHours() + ":" + time.getMinutes();	
		},
	}
}
</script>

<style lang="scss">
// @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
.state-up{
	padding-top: 12vw;
	.el-row{
		display: flex;
		justify-content: center;
		align-items: center;
		.el-button.is-round{
			margin-top: 2vw;
			padding: 4vw 20vw;
		}
	}
}
.el-message-box{
	width: 50%;
}
</style>
